<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新人注册</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#loginname").blur(function () {
                if (this.value == "")
                    return;
                let obj = this;
                $.post("checkrepeat.stu", {type: 'loginname', v: obj.value},
                    function (rtn) {
                        if(rtn=="true"){
                                $("#register").attr("disabled",true);
                                $(obj).next().html("此登录名已经被使用了");
                             }else{
                                $("#register").attr("disabled",false);
                                $(obj).next().html("可以使用");
                            }
                    }, "text").fail(function (e) {
                    $(obj).next().text("请求出现了错误");
                });
                // $.ajax({
                //    url:"checkrepeat.stu",
                //    data:{
                //        type:'loginname',
                //        v:obj.value
                //    },
                //    success:function (rtn) {
                //        if(rtn=="true"){
                //            $("#register").attr("disabled",true);
                //            alert("此登录名已经被使用了");
                //        }else{
                //            $("#register").attr("disabled",false);
                //            alert("可以使用");
                //        }
                //    },
                //    error:function (r) {
                //        alert("服务器执行出错："+r.responseText);
                //    }
                // });
            });
        });
    </script>
    <%--<script>
     function checkName(t) {
         if(t.value=="")
             return;
         document.getElementById("register").disabled=true;

         var xhr=new XMLHttpRequest();
         xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
                let s = xhr.responseText;
                if(s=="true"){

                    alert("登录名重复了");
                }else{
                    alert("登录名可以使用");
                    document.getElementById("register").removeAttribute("disabled");
                }
            }
         }
         xhr.open("get","checkrepeat.stu?type=loginname&v="+t.value,true);
         xhr.send(null);
     }
    </script>--%>
</head>
<body>
<h1>欢迎来到虎课系统</h1>
<form method="post" action="ureg" enctype="multipart/form-data">
    <fieldset>
        <legend>新用户注册</legend>
        <p>
            <label>登录名</label><input type="text" name="loginname" id="loginname" required maxlength="40"
                                     placeholder="只能由字母和数字组成" pattern="\w{2,40}"/><span></span>
        </p>
        <p>
            <label>姓名</label><input type="text" name="realname" required placeholder="必须是汉字"
                                    pattern="[\u4e00-\u9fa5]{2,20}"/>
        </p>
        <p>
            <label>手机号</label><input type="tel" name="phone" required placeholder="参考你的手机号" pattern="1\d{10}"/>
        </p>
        <p>
            <label>电子邮件</label><input type="email" name="email"/>
        </p>
        <p>
            <label>密码</label><input type="password" name="pass" required placeholder="必须是6位以上" pattern="\S{6,30}"
                                    maxlength="200"/>
        </p>
        <p>
            <label>积分</label><input type="number" name="score" value="100" readonly/>
        </p>
        <p>
            <!-- 一定不能和实体中的属性一致 -->
            <label>头像</label><input type="file" name="headpic2" onchange="previewFile(this)" />
            <img src="#" height="400px" width="500px" id="preview"/>
        </p>
        <p>
            <input type="submit" value="注册" id="register"/>
            <input type="reset" value="重来"/>
        </p>
    </fieldset>
</form>
<script>
    function previewFile(f) {
        var preview = document.querySelector('#preview');
        var file  = f.files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
            preview.src = reader.result;
        }
        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }
</script>
</body>
</html>
